<template>
  <transition name="fade">
    <div class="toast" :class="toastIcon" v-show="toastshow">
      <!-- 提示组件 -->
      <i class="iconfont" :class="iconType"></i>
      <span>{{ toastmsg }}</span>
    </div>
  </transition>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["toastshow", "toastmsg", "toastIcon"]),
    // 传值，看值的定义
    iconType() {
      switch (this.toastIcon) {
        case "success":
          return "icon-toast_chenggong";
        case "error":
          return "icon-toast-shibai_huaban";
        case "warning":
          return "icon-toast-jinggao";
      }
    },
  },
  methods: {
    ...mapMutations(["changetoastshow"]),
  },
};
</script>
<style lang="less" scoped>
.toast {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border: 1px solid black;
  padding: 20px;
  &.success {
    border-color: #0c0;
    background-color: rgb(163, 224, 190);
    .iconfont {
      color: #0c0;
    }
  }
  &.error {
    border-color: rgb(252, 7, 7);
    background-color: rgb(241, 151, 151);
    .iconfont {
      color: rgb(253, 4, 4);
    }
  }
  &.warning {
    border-color: rgb(252, 174, 7);
    background-color: rgb(240, 196, 130);
    .iconfont {
      color: rgb(252, 174, 7);
    }
  }
}
// 过渡的结束状态
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s, top 0.5s;
}
// 初始动画
.fade-enter,
.fade-leave-to {
  opacity: 0;
  top: 0;
}
</style>